import React, { useState, useEffect } from 'react';
import './Notification.css';

const Notification = ({ message, isVisible, onClose }) => {
  // 自动关闭计时器
  useEffect(() => {
    if (isVisible) {
      const timer = setTimeout(() => {
        onClose();
      }, 5000); // 5秒后自动关闭
      
      return () => clearTimeout(timer);
    }
  }, [isVisible, onClose]);

  if (!isVisible) return null;

  return (
    <div className="notification-overlay">
      <div className="notification-container">
        <div className="notification-content">
          <p>{message}</p>
          <button className="notification-close" onClick={onClose}>
            关闭
          </button>
        </div>
      </div>
    </div>
  );
};

export default Notification;